<!DOCTYPE html>
<html>

<head>
  <style>
    #response {
      white-space: pre-wrap;
    }
  </style>
</head>

<body>
  <div id="window-label"></div>
  <div id="container"></div>
  <div id="response"></div>

  <script>
    var WebviewWindow = window.__TAURI__.window.WebviewWindow
    var thisTauriWindow = window.__TAURI__.window.getCurrent()
    var windowLabel = thisTauriWindow.label
    var windowLabelContainer = document.getElementById('window-label')
    windowLabelContainer.innerText = 'This is the ' + windowLabel + ' window.'

    var container = document.getElementById('container')

    var responseContainer = document.getElementById('response')
    function runCommand(commandName, args, optional) {
      window.__TAURI__
        .invoke(commandName, args)
        .then((response) => {
          responseContainer.innerText += `Ok(${response})\n\n`
        })
        .catch((error) => {
          responseContainer.innerText += `Err(${error})\n\n`
        })
    }
    window.__TAURI__.event.listen('tauri://window-created', function (event) {
      responseContainer.innerText += 'Got window-created event\n\n'
    })

    var createWindowButton = document.createElement('button')
    var windowId = Math.random().toString().replace('.', '')
    var windowNumber = 1
    createWindowButton.innerHTML = 'Create child window ' + windowNumber
    createWindowButton.addEventListener('click', function () {
      runCommand('create_child_window', { id: `child-${windowId}-${windowNumber}` })
      windowNumber += 1
      createWindowButton.innerHTML = 'Create child window ' + windowNumber
    })
    container.appendChild(createWindowButton)
  </script>
</body>

</html>